<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>事件冒泡</h1>
        <div class='Out' onclick='OutFunction(event)'>
            <div class='Middle'>
                 <div class='Inner' onclick='InnerFunction(event)'></div>
            </div>
       </div>
       <script type="text/javascript">
            function InnerFunction(e){
                alert('InnerFunction()触发了')
                //如果提供了事件对象，则这是一个非IE浏览器 
                if ( e && e.stopPropagation ) {
                    //因此它支持W3C的stopPropagation()方法 
                    e.stopPropagation(); 
                }
                else{ 
                    //否则，我们需要使用IE的方式来取消事件冒泡 
                    window.event.cancelBubble = true; 
                }
            }
            function OutFunction(e){
                alert('OutFunction()触发了')
            }
        </script>
        <style>
            .Out{
                border: 1px solid red;
                height: 200px;
                padding: 10px 10px 10px 10px;
            }
            .Middle{
                border: 1px solid black;
                height: 150px;
                padding: 10px 10px 10px 10px;
            }
            .Inner{
                border: 1px solid green;
                height: 100px;
            }
        </style>
    </body>
</html>